<template>
  <!-- 方案规划导航栏 -->
   <div style="width: 100%;height: 100%;text-align: center;">

    
    <div class="box">
      <el-form ref="form" style="text-align: left;float: left;margin-top: 0.65vh;" :inline="true" class="demo-form-inline" label-position="right" :model="form" label-width="150px">
        <el-form-item label="">
          <el-radio-group v-model="timeType">
            <el-radio-button label="1">春季典型日</el-radio-button>
            <el-radio-button label="2">夏季典型日</el-radio-button>
            <el-radio-button label="3">秋季典型日</el-radio-button>
            <el-radio-button label="4">冬季典型日</el-radio-button>
          </el-radio-group>
        </el-form-item>
     
      
      </el-form>
            
      <div style="margin-top: 0.8vh;text-align: right;margin-right: 1vh;">
        <el-button type="primary" @click="queryOperationCharacteristics()" >
          <span class="button-text">查询</span>
        </el-button>
      </div>

    </div>

    <div style="" class="box1">
      <div id="barCharts1" style="width: 98%;height: 98%;margin: 0 auto;"></div>
    </div>

    <div class="box2">
      <div id="barCharts2" style="width: 98%;height: 98%;margin: 0 auto;"></div>
    </div>
  
    <div style="" class="box3">
      <div id="barCharts3" style="width: 98%;height: 98%;margin: 0 auto;"></div>
    </div>

    <div class="box4">
      <div id="barCharts4" style="width: 98%;height: 98%;margin: 0 auto;"></div>
    </div>
 
  </div>
  
</template>

<script>
   



  export default {
    name: 'operationCharacteristics',
    data() {
      return {
        timeType : "1",  
        schemeId : "",
        projectId : '',
      }
    },
    mounted: function() {
      this.schemeId = this.$route.query.schemeId;
      this.projectId = this.$route.query.projectId;
      this.queryOperationCharacteristics();
    },
    methods: {
      
      
      queryOperationCharacteristics : function(){

        var vm = this;

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryOperationCharacteristics?schemeId='+this.schemeId+"&timeType="+this.timeType+"&projectId=").then((res) => {
          
          var result = res.data;
           
          if(result){

            let barCharts1 = this.$echarts.init(document.getElementById('barCharts1'))
            let barCharts2 = this.$echarts.init(document.getElementById('barCharts2'))
            let barCharts3 = this.$echarts.init(document.getElementById('barCharts3'))
            let barCharts4 = this.$echarts.init(document.getElementById('barCharts4'))

            var barOption1 = this.getBarOption("kg");
            var barOption2 = this.getBarOption("kW");
            var barOption3 = this.getBarOption("kW");
            var barOption4 = this.getBarOption("kW");

            var data1 = [
              {
                name: '氢负荷',
                type: 'line',
                label: {
                  show: false,
                  position: "top",
                  distance: 10,
                  color: "#20E6A4",
                fontSize: 16,
                  formatter: "{c}" + "",
              },
              splitLine:{  formatter: '{value}',}, itemStyle:{normal:{color:"#20E6A4"}},  
                data: result.seriesData1
              },
              {
                name: result.seriesData2!=null&&result.seriesData2.length>0?'购氢':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData2
              },
              {
                name: result.seriesData3!=null&&result.seriesData3.length>0?'ALK电解槽':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData3
              },
              {
                name: result.seriesData4!=null&&result.seriesData4.length>0?'PEM电解槽':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData4
              },
              {
                name: result.seriesData5!=null&&result.seriesData5.length>0?'AEM电解槽':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData5
              },{
                name: result.seriesData6!=null&&result.seriesData6.length>0?'固态储氢':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData6
              },{
                name: result.seriesData7!=null&&result.seriesData7.length>0?'气态储氢':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData7
              },{
                name: result.seriesData8!=null&&result.seriesData8.length>0?'液态储氢':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData8
              },{
                name: result.seriesData9!=null&&result.seriesData9.length>0?'燃料电池':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData9
              },
            ]
            barOption1.series = data1;
            barOption1.yAxis.name = "kg";
            barOption1.title.text = "氢平衡";
            barOption1.xAxis[0].data = result.xAxisData;

            var data2 = [
              {
                name: '电负荷',
                type: 'line',
                label: {
                  show: false,
                  position: "top",
                  distance: 10,
                  color: "#20E6A4",
                fontSize: 16,
                  formatter: "{c}" + "",
              },
              splitLine:{  formatter: '{value}',}, itemStyle:{normal:{color:"#20E6A4"}},  
                data: result.seriesData10
              },
              {
                name: result.seriesData11!=null&&result.seriesData11.length>0?'电网':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData11
              },
              {
                name: result.seriesData12!=null&&result.seriesData12.length>0?'光伏/热':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData12
              },
              {
                name: result.seriesData13!=null&&result.seriesData13.length>0?'光伏':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData13
              },
              {
                name: result.seriesData14!=null&&result.seriesData14.length>0?'风机':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData14
              },{
                name: result.seriesData15!=null&&result.seriesData15.length>0?'锂电池':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData15
              },{
                name: result.seriesData16!=null&&result.seriesData16.length>0?'铅酸电池':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData16
              },{
                name: result.seriesData17!=null&&result.seriesData17.length>0?'ALK电解槽':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData17
              },{
                name: result.seriesData18!=null&&result.seriesData18.length>0?'PEM电解槽':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData18
              },{
                name: result.seriesData19!=null&&result.seriesData19.length>0?'AEM电解槽':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData19
              },{
                name: result.seriesData20!=null&&result.seriesData20.length>0?'固态储氢':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData20
              },{
                name: result.seriesData21!=null&&result.seriesData21.length>0?'气态储氢':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData21
              },{
                name: result.seriesData22!=null&&result.seriesData22.length>0?'液态储氢':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData22
              },{
                name: result.seriesData23!=null&&result.seriesData23.length>0?'燃料电池':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData23
              },{
                name: result.seriesData24!=null&&result.seriesData24.length>0?'地源热泵':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData24
              },{
                name: result.seriesData25!=null&&result.seriesData25.length>0?'空气源热泵':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData25
              },{
                name: result.seriesData26!=null&&result.seriesData26.length>0?'水源热泵':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData26
              },{
                name: result.seriesData27!=null&&result.seriesData27.length>0?'固体蓄热':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData27
              },{
                name: result.seriesData28!=null&&result.seriesData28.length>0?'冰蓄冷':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData28
              },
            ]
            barOption2.series = data2;
            barOption2.yAxis.name = "kW";
            barOption2.title.text = "电平衡";
            barOption2.grid.bottom  = "20%";
            barOption2.xAxis[0].data = result.xAxisData;


            var data3 = [
              {
                name: '热负荷',
                type: 'line',
                label: {
                  show: false,
                  position: "top",
                  distance: 10,
                  color: "#20E6A4",
                  fontSize: 16,
                    formatter: "{c}" + "",
                  },
                  splitLine:{
                    formatter: '{value}',}, itemStyle:{normal:{color:"#20E6A4"}
                  },  
                    
                  data: result.seriesData29
              },
              {
                name: result.seriesData30!=null&&result.seriesData30.length>0?'光伏/热':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData30
              },
              {
                name: result.seriesData31!=null&&result.seriesData31.length>0?'集热器':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData31
              },
              {
                name: result.seriesData32!=null&&result.seriesData32.length>0?'地源热泵':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData32
              },
              {
                name: result.seriesData33!=null&&result.seriesData33.length>0?'空气源热泵':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData33
              },{
                name: result.seriesData34!=null&&result.seriesData34.length>0?'水源热泵':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData34
              },{
                name: result.seriesData35!=null&&result.seriesData35.length>0?'固体蓄热':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData35
              },{
                name: result.seriesData36!=null&&result.seriesData36.length>0?'水蓄热':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData36
              },{
                name: result.seriesData37!=null&&result.seriesData37.length>0?'燃料电池':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData37
              },{
                name: result.seriesData38!=null&&result.seriesData38.length>0?'吸收式制冷机':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData38
              },{
                name: result.seriesData39!=null&&result.seriesData39.length>0?'浪费':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData39
              }
            ]
            barOption3.series = data3;
            barOption3.yAxis.name = "kW";
            barOption3.title.text = "热平衡";
            barOption3.grid.bottom  = "15%";
            barOption3.xAxis[0].data = result.xAxisData;

            var data4 = [
              {
                name: '冷负荷',
                type: 'line',
                label: {
                  show: false,
                  position: "top",
                  distance: 10,
                  color: "#20E6A4",
                  fontSize: 16,
                  formatter: "{c}" + "",
                },
                splitLine:{  formatter: '{value}',}, itemStyle:{normal:{color:"#20E6A4"}},  
                data: result.seriesData40
              },
              {
                name: result.seriesData41!=null&&result.seriesData41.length>0?'地源热泵':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData41
              },
              {
                name: result.seriesData42!=null&&result.seriesData42.length>0?'空气源热泵':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData42
              },
              {
                name: result.seriesData43!=null&&result.seriesData43.length>0?'水源热泵':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData43
              },
              {
                name: result.seriesData44!=null&&result.seriesData44.length>0?'吸收式制冷机':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData44
              },
              {
                name: result.seriesData45!=null&&result.seriesData45.length>0?'水蓄冷':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData45
              },
              {
                name: result.seriesData46!=null&&result.seriesData46.length>0?'冰蓄冷':"",
                type: 'bar',
                barWidth: 20,
                stack: 'machine',
                data: result.seriesData46
              }
            ]
            barOption4.series = data4;
            barOption4.yAxis.name = "kW";
            barOption4.title.text = "冷平衡";
            barOption4.xAxis[0].data = result.xAxisData;

            barCharts1.clear(); 
            barCharts2.clear(); 
            barCharts3.clear(); 
            barCharts4.clear(); 

            barCharts1.setOption(barOption1); 
            barCharts2.setOption(barOption2); 
            barCharts3.setOption(barOption3); 
            barCharts4.setOption(barOption4); 

            window.onresize = function(){
              barCharts1.resize(); 
              barCharts2.resize(); 
              barCharts3.resize(); 
              barCharts4.resize(); 
            }




          }
        }).catch((error) => {
          console.log(error);
        });


      },
      

      getBarOption:function(unit){

        var barOption = {
          title: {
            text: '',
            left: 'center', // 标题居中显示
            top:'2%',
            textStyle: {
              color: '#f2f2f2', // 标题字体颜色为黑色
              fontSize: 16, // 标题字体大小为24px
              fontWeight: 'bold', // 标题字体加粗
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (params) {
              let htmlStr = ''
              for (let i = 0; i < params.length; i++) {
                const param = params[i]
                const xName = param.name
                const seriesName = param.seriesName
                let value = ''
                const color = param.color
                if (i === 0) {
                  htmlStr += xName + '<br/>'
                }
                htmlStr += '<div>'
                htmlStr +=
                  '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                  color +
                  ';"></span>'
                if (param.value !== null && param.value !== undefined) {
                  value = param.value
                  htmlStr +=
                    seriesName +
                    ': ' + value + ''
                } else {
                  value = '-'
                  htmlStr +=
                    seriesName +
                    ': ' + value
                  htmlStr += '</div>'
                }
              }
              return htmlStr
            }
            // formatter: '{a}<br />{c}'
          },

          color: [
            'rgba(31, 198, 255, 0.7)',
            'rgba(165, 214, 63, 0.7)',
            'rgba(0, 186, 173, 0.7)',
            'rgba(255, 87, 51, 0.7)',
            'rgba(255, 195, 0, 0.7)',
            '#1CA5A8'
          ],
          legend: {
            show: true, 
            bottom: '-1%',
            //icon: 'rect',
            itemGap: 5,
            itemWidth: 10, // 图例标记的图形宽度。
            itemHeight: 10, //  图例标记的图形高度。
            textStyle: {
              color: '#ccc',
              fontSize: 12,
              padding: [0, 8, 0, 8]
            }
          },
          grid: {
            top:"15%",
            left: '3%',
            right: '3%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              
              axisLine: {
                // 坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                  width:1,
                  color: '#ccc'
                }
              },
              axisLabel: {
                // 坐标轴刻度标签的相关设置
                margin: 12,
                textStyle: {
                  color: '#ccc',
                  fontSize: 14
                }
              },
              axisTick: {
                show: false
              },
              data: []
            }
          ],
          yAxis: [
            {
              // minInterval: 1,
              type: 'value',
              name:unit,
              nameTextStyle: {
                fontSize:12,
                color: '#f2f2f2',
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#C4C4C4',
                  type: 'solid'
                }
              },
              axisLine: {
                // 坐标轴轴线相关设置。数学上的y轴
                show: true,
                lineStyle: {
                  color: '#ccc'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#ccc',
                  fontSize: 14
                }
              },
              axisTick: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '压路机',
              type: 'bar',
              stack: 'machine',
              barWidth: 20,
              data: []
            },
            {
              name: '打桩机',
              type: 'bar',
              barWidth: 20,
              stack: 'machine',
              data: []
            },
            {
              name: '运输车',
              type: 'bar',
              barWidth: 20,
              stack: 'machine',
              data: []
            },
            {
              name: '混凝土搅拌机',
              type: 'bar',
              barWidth: 20,
              stack: 'machine',
              data: [5.7, 8, 4, 6.2, 6.3,3]
            },
            {
              name: '吊车',
              type: 'bar',
              barWidth: 20,
              stack: 'machine',
              data: [1, 2.6, 2, 2, 1,2]
            },


          ]
        };


        return barOption;

      }

    }
  }
</script>



<style>

.el-table{
  background-color: rgb(20 34 78);
  color: #FFFFFF;
  border-color: rgb(24 63 124 / 51%);
  *{
    border-color: rgb(24 63 124 / 51%) !important;
  }
  .el-table__header-wrapper{
    tr{
      background-color: rgb(10 24 90 / 81%);
      th{
        color: #ffffff;
        background-color: rgba(0,0,0,0.4);
      }
    }
  }
  .el-table__body-wrapper{
    tr{
      background-color: rgb(8 26 80 / 88%);
      &:hover>td{      
        background-color: rgb(13 30 80);
      }
    }
  }
}
  .el-form--inline .el-form-item__content {
      display: inline-block;
      vertical-align: middle;
      margin-left: 1vh;
  }

  .el-radio {
      color: #eff4ff;
      cursor: pointer;
      margin-right: 30px;
  }

  .el-form-item {
      margin-bottom: 5px;
  }
  .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #f2f2f2;
      line-height: 40px;
      padding: 0 1px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  .el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #a3aec5;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  .el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }
</style>


<style scoped> 

  /deep/ .el-radio-button__inner {
      white-space: nowrap;
      background: #3a4287;
      border: 1px solid #3f75f3;
      font-weight: 500;
      border-left: 0;
      color: #eaf1ff;
      -webkit-appearance: none;
      text-align: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      outline: 0;
      margin: 0;
      position: relative;
      cursor: pointer;
      -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
      transition: all .3s cubic-bezier(.645,.045,.355,1);
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 0;
  }


  /* 设定地图的大小 */
  #allmap{
    height: 350px;
    width: 100%;
  }

  .buttonStyle {
    height: 4vh;
    width: 24vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Arial;
    border: none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #1f2c6c3b;
    border-bottom: 1px solid rgb(64, 158, 255);
    margin: 1.5vh 10px;
    text-align: center;
    line-height: 4vh;
    vertical-align: middle;
    text-decoration: none;
  }

  .box{  
    width: 96.7%;
    height: 7%;
    position: absolute;
    left: 3vh;
    top: 10vh;
    margin: auto;
    border-radius: 5px;
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }


  .box1{  
    width: 48%;
    height: 35%;
    position: absolute;
    left: 3vh;
    top: 17vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

 

  .box2{ 
    width: 47.8%;
    height: 35%;
    position: absolute;
    left: 88vh;
    top: 17vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }
  
  .box3{ 
    width: 48%;
    height: 39%;
    position: absolute;
    left: 3vh;
    top: 47vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .box4{ 
    width: 47.8%;
    height: 39%;
    position: absolute;
    left: 88vh;
    top: 47vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .titleCss{
    font-size: 22px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #f2f2f2;
  }
</style>
